<template>
    <div>
        <p @click="isPay=true">支付密码</p>
        <vue-pay-keyboard
        ref="pay"
        highlight-color="gray"
        :pas-digits="numLength"
        :is-pay='isPay'
        @pas-end='pasEnd'
        @close='isPay=false'>
            <!-- 自定义支付动画 -->
            <div slot="loading-ani">
                <svg></svg>
            </div>
        </vue-pay-keyboard>
    </div>
</template>

<script>
/* eslint-disable*/
export default {
    data() {
        return {
            isPay: false,
            numLength: 6
        }
    },
    methods:{
        pasEnd(val) {
        console.log(val);  //得到密码 可能会进行一些加密动作
        setTimeout(() => { // 模拟请求接口验证密码中 ..
            if (val === '111111') { // 密码正确
                this.$refs.pay.$payStatus(true) // 拿到子组件的事件
            } else {
                this.$refs.pay.$payStatus(false)
            }
        }, 1000)
        }
    }
}
</script>

<style>

</style>
